<template>
  <div class="character-collection-container">
    <div class="page-header">
      <h1>文字收藏</h1>
    </div>

    <!-- 搜索框 -->
    <div class="search-section">
      <el-input v-model="searchQuery" placeholder="搜索..." class="search-input">
        <template #suffix>
          <el-icon>
            <Search />
          </el-icon>
        </template>
      </el-input>
      <el-button class="menu-button">
        <el-icon>
          <Menu />
        </el-icon>
      </el-button>
    </div>

    <!-- 汉字收藏卡片 -->
    <div class="character-grid">
      <div class="character-card" v-for="(item, index) in filteredItems" :key="item.id" @click="goToDetail(item)" style="cursor: pointer;">
        <div class="card-stack">
          <div class="card-image">
            <img :src="item.image" :alt="item.title" />
          </div>
        </div>
        <div class="card-info">
          <div class="card-header">
            <h3>{{ item.title }}</h3>
          </div>
          <p class="description">{{ item.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';

// 引入图片
import ziIcon from '@/assets/zi_icon.png';
import worklistTest from '@/assets/zi_icon.png';
import worklistTest2 from '@/assets/zi_icon.png';

// 定义数据
const items = ref([
  { 
    id: '1',
    title: '永', 
    description: '永字八法，书法的经典之一。', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/6okxq.png' 
  },
  { 
    id: '2',
    title: '是', 
    description: '译为"此，这，这个，这样"。', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/1amx4i.png' 
  },
  { 
    id: '3',
    title: '者', 
    description: '一是作代词用，可代人、代物...', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/1amwey.png' 
  },
  { 
    id: '4',
    title: '马', 
    description: '一头身足尾俱全的马的侧面...', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/6nure.png' 
  },
  { 
    id: '5',
    title: '字', 
    description: '仓颉之初作书，盖依类象形...', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/1amyhl.png' 
  },
  { 
    id: '6',
    title: '神', 
    description: '天神，引出万物者也。', 
    image: 'https://s1.mintiny.com/wlake/i/2024/12/22/1amz9k.png' 
  },
]);

// 搜索查询
const searchQuery = ref('');

// 过滤后的数据
const filteredItems = computed(() => {
  return items.value.filter(item =>
    item.title.includes(searchQuery.value) || item.description.includes(searchQuery.value)
  );
});

const router = useRouter();

const goBack = () => {
  router.push('/collect');
};

const goToDetail = (item: any) => {
  console.log('Navigating to character detail:', item);
  router.push({
    name: 'CharacterDetail',
    params: { 
      id: item.id,
      character: item.title,
      image: item.image,
      description: item.description
    },
    query: {
      image: item.image
    }
  });
};
</script>
<style scoped>
/* 背景色和字体 */
html,
body {
  height: 100%;
  /* 确保背景色覆盖整个页面 */
  background-color: #f4f7fa;
  /* 背景色 */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.character-collection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* 确保容器高度至少为视口高度 */
}


.title {
  font-size: 28px;
  font-weight: bold;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  margin-bottom: 50px;
  background-color: #fff;
  border-radius: 50px;
  padding: 3px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 每行显示4个卡片 */
  gap: 20px;
  width: 100%;
  max-width: 100%;
  /* 修改为百分比宽度，适应屏幕 */
  padding: 0 15px;
  margin-top: 20px;
}

/* 修改卡片容器样式 */
.card-stack {
  display: flex;
  justify-content: center; /* 水平居中图片 */
  width: 100%;
}

/* 修改卡片图片容器样式 */
.card-image {
  width: 100%; /* 让图片容器占满卡片宽度 */
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 修改卡片样式 */
.character-card {
  background: white;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 180px;
  height: 220px;
}

/* 添加悬停效果 */
.character-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.character-card:hover .card-image {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* 图片保持比例填充容器 */
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}


.card-info {
  padding: 8px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.description {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* 添加返回按钮样式 */
.top {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.back-button {
  margin-right: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .page-header h1 {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

</style>
